<template>
  <view class="pay-result">
    <view class="header">
      <uni-icons size="50" color="#16C2A3" type="checkmark-circle" />
      <text class="amount">¥ 35.00</text>
      <text class="status">支付成功</text>
    </view>
    <view class="message"> 订单支付成功，已通知药房尽快发出，请耐心等待~ </view>
    <view class="actions">
      <button class="action-button" @click="viewOrder">查看订单</button>
      <button class="action-button" @click="returnToRoom">返回诊室</button>
    </view>
  </view>
</template>

<script lang="ts" setup>
const viewOrder = () => {
  // 跳转到订单详情页
  uni.redirectTo({ url: '/subpkg_medicine/pages/order_detail/order_detail' })
}

const returnToRoom = () => {
  // 返回诊室
  uni.navigateTo({ url: '/subpkg_consult/pages/room/room' })
}
</script>

<style lang="scss" scoped>
.pay-result {
  display: flex;
  flex-direction: column;
  align-items: center;

  height: 100vh;
  background-color: #f9f9f9;
  padding: 20px;
  box-sizing: border-box;

  .header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;

    .amount {
      font-size: 28px;
      color: #333;
      margin-top: 10px;
      font-weight: bold;
    }

    .status {
      font-size: 20px;
      color: #16c2a3;
      margin-top: 5px;
    }
  }

  .message {
    font-size: 16px;
    color: #666;
    text-align: center;
    margin-bottom: 30px;
    line-height: 1.5;
  }

  .actions {
    display: flex;
    gap: 15px;

    .action-button {
      background-color: #16c2a3;
      color: #fff;
      padding: 10px 20px;
      border-radius: 20px;
      font-size: 16px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      transition: background-color 0.3s;

      &:hover {
        background-color: #14a892;
      }
    }
  }
}
</style>
